﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="js/v5.1.3-dist/ol.css" rel="stylesheet" type="text/css" />
    <script src="js/v5.1.3-dist/ol.js" type="text/javascript"></script>
    <link href="css/example.css" rel="stylesheet" />
    <script src="js/InitMap.js"></script>

    <script type="text/javascript">
        window.onload = function () {
            var map = initMap();
             var source = new ol.source.Vector({
            wrapX: false
        });
        var vector = new ol.layer.Vector({
            source: source
        });
        map.addLayer(vector);

        function addRandomFeature() {
            var x = Math.random() * 360 - 180;
            var y = Math.random() * 180 - 90;
            var geom = new ol.geom.Point([x, y]);
            var feature = new ol.Feature(geom);
            source.addFeature(feature);
        }

        var duration = 3000;
        function flash(feature) {
            var start = new Date().getTime();
            var listenerKey;

            function animate(event) {
                var vectorContext = event.vectorContext;
                var frameState = event.frameState;
                var flashGeom = feature.getGeometry().clone();
                var elapsed = frameState.time - start;
                var elapsedRatio = elapsed / duration;
                //指定半径从5开始，到30结束
                var radius = ol.easing.easeOut(elapsedRatio) * 25 + 5;
                var opacity = ol.easing.easeOut(1 - elapsedRatio);

                var style = new ol.style.Style({
                    image: new ol.style.Circle({
                        radius: radius,
                        snapToPixel: false,
                        stroke: new ol.style.Stroke({
                            color: 'rgba(255, 0, 0, ' + opacity + ')',
                            width: 0.25 + opacity
                        })
                    })
                });

                vectorContext.setStyle(style);
                vectorContext.drawGeometry(flashGeom);
                if (elapsed > duration) {
                    ol.Observable.unByKey(listenerKey);
                    return;
                }
                //继续postcompose动画
                map.render();
            }
            listenerKey = map.on('postcompose', animate);
        }

        source.on('addfeature', function (e) {
		console.log(e);
            flash(e.feature);
        });

        window.setInterval(addRandomFeature, 1000);
        }
    </script>
</head>
<body>
    <div id="map">
    </div>
</body>
</html>
